<script setup>
import { onLoad } from '@dcloudio/uni-app';
import {ref} from 'vue'
const props = defineProps({
  list:Array
})

//轮播图指示点
const currentIndex = ref(0)
const OnChange = (e)=>{
  currentIndex.value =e.detail.current
}

onLoad(()=>{
  // console.log(props.list.value);
})

</script>

<template>
<view class="carousel">
    <!-- 轮播图 -->
    <!-- <swiper :circular="true" :autoplay="true" indicator-dots="true" :interval="3000">
      <swiper-item v-for="item in list" :key="item.id">
        <navigator  hover-class="none" class="navigator">
          <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
        </navigator>
      </swiper-item>
    </swiper> -->
    <!-- <view>{{ list }}</view> -->
     <!-- <view>{{ list.list.length}}</view> -->
    <swiper
        :indicator-dots="false"
        :autoplay="true"
        :circular="true"
        interval="3000"
        @change="OnChange"
      >
        <swiper-item v-for="item in list" :key="item.id">
          <image
            :src="item.imgUrl"
            mode="aspectFill"
            class="image"
          ></image>
        </swiper-item>
      </swiper>
      <!-- 指示点 -->
      <view class="indicator">
        <text class="dot" v-for="(item,index) in list" :key="item.id" :class="{active: currentIndex===index}" ></text>
      </view>
</view>
  
</template>

<style lang="scss">
:host {
  display: block;
  height: 280rpx;
}
/* 轮播图 */
.carousel {
  height: 100%;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  
  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;
    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .active {
      background-color: #fff;
    }
  }
  
}
.navigator,
.image {
    width: 100%;
    height: 100%;
  }
</style>